<template>
	<view class="m-position">
		<view class="postName">
			<view class="bl"></view>{{detailInfo.title}} 
			<text v-if="isSecondCollect" class="status inprogress">进行中</text>
			<text v-if="!isSecondCollect" class="status end">已取消/已结束</text>
		</view>
		<view class="info-box dev-box">
			<view class="mark">基本信息</view>
			<view class="right">
				
				<!-- <text class="iconfont" style="color:#ffd12b">&#xe642;</text>薪资待遇 {{ detailInfo.timeMoney+'元/小时' }} -->
		<text v-if="istimeMoney==1" class="right">{{ detailInfo.timeMoney +'元/小时' }}</text>
		
		<text v-else-if="istimeMoney===2" class="right">{{ detailInfo.timeMoney +'元/小时' }}</text>
		<text v-else-if="istimeMoney===3" class="right">{{ detailInfo.timeMoney +'元/月' }}</text>
		
			
			</view>
			
			<view class="info-item" style="padding-top:90upx">
				<text class="t">工作场景：</text>{{detailInfo.workType}}
			</view>
			<view class="info-item" >
				<text class="t">工资结算周期：</text>{{detailInfo.wayModel}}
			</view>
			<view class="info-item">
				<text class="t">人员要求：</text>{{detailInfo.num}}
			</view>
			<view class="info-item">
				<text class="t">工作内容：</text>{{detailInfo.describes}}
			</view>
			<view class="info-item">
				<text class="t">岗位说明：</text>{{detailInfo.jobDescription}}
			</view>
			
			
			<view class="info-item">
				<text class="t">工作日期：</text>{{detailInfo.jobDescription}}
			</view>
			<view class="info-item">
				<text class="t">工作时间：</text>{{detailInfo.jobDescription}}
			</view>
			
			
			<view class="info-item">
				<text class="t">岗位开始时间-结束时间：</text>{{formatCreateTime(detailInfo.startTime)+"-"+formatCreateTime(detailInfo.endTime)}}
			</view>
			<view class="info-item">
				<text class="t">发布时间：</text>{{formatCreateTime(detailInfo.createTime)}}
			</view>
			
		   <view v-if="isSecondCollect" class="info-item">
			   <view v-if="detailInfo.filePath!=''" class="info-item">
			<text  class="t">商家图片：</text>
			 <image :src="detailInfo.filePath"></image>
		   </view>
		  </view>
		  
			<hr />
			<view class="label" v-if="detailInfo.labelList!=null">
				<text class="title-parttime" v-for="(labelItem, labelIndex) in detailInfo.labelList.split(',')">{{labelItem}}</text>
			</view>
			<view class="label" v-else="">
				<text class="title-parttime"></text>
			</view>
		</view>
		<view class="info-box dev-box">
			<view class="mark">工作地点</view>
			<view class="info-item " style="padding-top:90upx" @click="toMap(isSecondCollect)">
				<view class="t"><uni-icons type="location" style="margin-right:15upx;"></uni-icons>
				{{detailInfo.province+detailInfo.city+detailInfo.distinguish}}</view>
			</view>
			<view v-if="isSecondCollect" @click="toMap()" class="info-item " style="font-size: 26upx;">
				详细地址：
				{{detailInfo.address}}
			</view>
			
	        <view v-if="isSecondCollect" class="info-item " style="font-size: 26upx;">
				联系人：
				{{detailInfo.name}}
				<view @click="goPhoneBtn()">
					电话：
					{{detailInfo.toPhone}} <image class="tel" src="../../../static/myIcon/tel.png"></image> </view>
			</view>
			<view class="label" v-if="detailInfo.labelList!=null">
				<text class="title-parttime" v-for="(labelItem, labelIndex) in detailInfo.labelList.split(',')">{{labelItem}}</text>
			</view>
		</view>
		<view class="info-bttom">
			<view class="deadline dev-box">
				<view class="t"><text class="iconfont">&#xe64d;</text>截止时间</view>
				<view class="t">{{formatCreateTime(detailInfo.endUserTime)}}</view>
			</view>
				
			<view class="surplus dev-box">
				<view class="t"><text class="iconfont">&#xe63a;</text>剩余名额</view>
				<view class="t">{{detailInfo.num+"/人"}}</view>
			</view>
			
		</view>
		<view class="btn-box">
		<!-- 	<view class="apprise">
				<uni-icons type="chat"  class="fx" size="30"></uni-icons>
				<view class="fx">评价</view>
			</view> -->
			<view class="collect">
				<uni-icons v-if="!isCollect" type="star" class="fx" size="30" @click="collect(true)" ></uni-icons>
				<uni-icons v-else type="star-filled" class="fx" size="30" color="#FFB300" @click="collect(false)"></uni-icons>
				<view class="fx">收藏</view>
			</view>
<!-- 			<button class="submitBtn" @click="submit" :disabled="btnShow">立即提交</button> -->
			
			<button class="enroll-btn" @click="cancelRegistration" v-if="isSecondCollect">取消报名</button>
			<button class="enroll-btn"  v-else="!isSecondCollect">已取消</button>
			<button class="enroll-btn1"  @click="enrollerSave"  v-if="!isSecondCollect" >重新报名</button>
			
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import { formatDate } from '@/common/date';
export default {
	components: {
	},
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			id:"",
			isCollect:false,
			istimeMoney:0,
			isSecondCollect:false,
			enroMsg:"",
			detailInfo:{
				enroMsg:""
			},
			volley:false
			
		};
	},
	async onLoad(query) {
		if(query.id){
			this.id = query.id;
			
			
		}
	},

	
	onShow() {
		let res =this.getDetail(this.id);
		

		//this.cancelRegistration(this.id);
	},
	methods: {
		goPhoneBtn() {
					var that= this;
						uni.makePhoneCall({
							// 手机号
							phoneNumber: that.detailInfo.toPhone,
							// 成功回调
							success: (res) => {
							},
							// 失败回调
							fail: (res) => {
							}
						});
					},
		toMap(e){
			if(e){
			uni.openLocation({
				latitude: Number(this.detailInfo.latitude), //要去的纬度-地址
				longitude: Number(this.detailInfo.longitude), //要去的经度-地址
				address: this.detailInfo.address,   //要去的具体地址
			})
			}
		},
		//报名提交
		async enrollerSave(){
			let param={
				id:this.id
			}
			let res = await this.$apis.enrollerSave(param);
			var that = this;
			if(res){
				uni.showModal({
					content:"重新报名成功！",
					showCancel:false,
					success(res) {
						uni.redirectTo({
							url:"/pages/my/myPosition/detail?id="+that.id
						})
					}
				})
			}
		},
		/**
		 * 查询职位详情
		 */
	  async cancelRegistration(id){
			
					 let res=this.$apis.cancelRegistration({ id: this.id });
					 if(res){
						uni.showModal({
							content:"取消报名成功！",
							showCancel:false,
							success(res) {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					 }else{
					 	uni.showToast({ title: '处理异常', icon: 'error' });
					 }
				},
		async getDetail(id) {
			uni.showLoading({
				mask: true
			});
			let res = await this.$apis.getPostDetail({ id: id });
			if (res) {
				this.isCollect=res.isCollect;
				this.isSecondCollect=res.isSecondCollect;
				console.log(res.isSecondCollect);
				this.detailInfo.enroMsg=this.detailInfo.enroMsg;
				this.enroMsg=res.enroMsg;
				this.detailInfo=res.second;
				if(this.detailInfo.wayModel=='兼职'){
					this.istimeMoney=1;
				}else if(this.detailInfo.wayModel=='兼职'){
					this.istimeMoney=2;
					
				}else{
					this.istimeMoney=3;
					
				}
			}
			uni.hideLoading();
		},
		formatCreateTime(time) {
			if (time == null || time === '') {
				return null;
			}
			let str = time.replace(/-/g,'/');
			let date = new Date(str);
			return formatDate(date, 'yyyy.MM.dd');
		},
		collect(isC){
			if(this.volley){
				uni.showToast({ title: '请勿频繁操作！', icon: 'error'});
				return;
			}
			if(isC){
				let res=this.$apis.postCollect({ id: this.id });
				if(res){
					uni.showToast({ title: '收藏成功', icon: 'success' });
				}else{
					uni.showToast({ title: '处理异常', icon: 'error' });
				}
			}
			else {
				let res=this.$apis.postCollectCancel({ id: this.id });
				if(res){
					uni.showToast({ title: '取消成功', icon: 'success' });
				}else{
					uni.showToast({ title: '处理异常', icon: 'error' });
				}
			}
			this.volley=true;
			setTimeout(()=>
			      {
			         this.volley=false;
			      }, 3000)
			this.isCollect=isC;
		}
	}
};
</script>

<style lang="scss" scoped>
.tel{
	width: 35rpx;
	height: 35rpx;
	margin: 0 25rpx;
	vertical-align: text-bottom;
}
	.m-position {
		padding-bottom:150upx;
		.postName {
			margin: 20upx 4% 20upx 4%;
			font-weight: bold;
			font-size: $font-size-34;
			line-height: 50upx;
			.bl{
				border-radius: 6upx;
				float:left;
				margin-right:20upx;
				background-color: #36B957;
				margin-top:5upx;
				height:40upx;
				width:10upx;
			}
				
		}
		.mark{
			color:white;
			line-height: 65upx;
			width:140upx;
			text-align: center;
			float:left;
		}
		.info-box {
			background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label1.png);
			background-size: 220upx 80upx;
			background-repeat: no-repeat;
			background-color: $bgcolor_white;
			padding: 0upx 30upx 30upx 30upx;
			// margin-bottom: 20upx;
			.info-item{
				line-height: 60upx;
				color:#666;
				
			}
			.right {
				color: #36B957;
				font-weight: bold;
				line-height: 65upx;
				float:right;
			}
		}
		.info-bttom{
			display: flex;
			text-align: center;
			line-height: 60upx;
			.deadline{
				flex: 1;
			}
			.surplus{
				flex:1;
			}
		}
	}
	.t{
		color:black;
		font-weight: bold;
	}
	
	.label{
		padding:30upx 0upx;
		border-top: 4upx dashed  #ccc;
		height:40upx;
		width:100%;
		margin-top:20upx;
		.title-parttime{
			color: #66666E;
			border: 1upx solid #36B957;
			background-color: #F5FFE6;
			font-size: $uni-font-size-sm;
			margin-right: 15upx;
			padding: 4upx 15upx;
			border-radius: 6upx;
			line-height: 40upx;
			float: left;
		}
	}
	.title {
		margin-top:10upx;
		.title-name{
			font-weight: bold;
			font-size: $uni-font-size-lg;
		}
		
	}
	.btn-box{
		 position: fixed;
		 bottom:0px;
		 display: flex;
		 width:92%;
		 padding:30upx 4% 30upx 4%;
		 background-color: white;
		  //box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
		 // z-index: 9999;
		.apprise{
			flex:1;
			display: flex;
			flex-direction: column;
		}
		.collect{
			padding-left:20upx;
			flex:1;
			display: flex;
			flex-direction: column;
		}
		.enroll-btn{
			flex:3;
			background-color: #aaa;
			color:white;
			border-radius: 45upx;
			width: 20rpx;
		}
		.enroll-btn1{
			flex:3;
			background-color: #36B957;
			color:white;
			border-radius: 45upx;
			width: 20rpx;
		}
	}
	.fx{
		flex: 1;
		font-size: 35upx;
		line-height: 35upx;
	}
	.status{
		margin-left:30upx;
		padding:10upx 14upx;
		font-size: 24upx;
		border-radius: 30upx;
	}
	.inprogress{
		border: 1upx solid #36B957;
		background-color: #E1F3C7;
	}
	.end{
		border: 1px solid #B93636;
		background-color: #F3C7C7;
	}
	.iconfont{
		margin-right:10upx;
		font-size: 35upx;
	}
</style>
